<template>
  <div class="content-wrap" id="menu-container">
    <!-- 检索区域 -->
    <el-form class="search-wrap" :inline="true" :model="searchForm">
      <!-- 方案一：需求关键字 -->
<!--       <el-form-item class="search-wrap-item" label="需求关键字：">
        <el-input
          class="search-ipt search-select"
          v-model="searchForm.title_name"
          type="text"
          style="min-width: 200px"
          placeholder="请输入需求关键字"
          clearable
          @input="handleSearch"
        >
        </el-input>
      </el-form-item> -->
      <!-- 方案二：模糊查找 -->
      <el-form-item class="search-wrap-item" label="需求关键字：">
        <el-autocomplete
          style="width: 400px;" 
          v-model="searchForm.title_name"
          :fetch-suggestions="querySearch"
          clearable
          class="inline-input search-select"
          placeholder="请输入需求名称"
          @select="handleSearch"
          @clear="handleSearch"
        />
      </el-form-item>
      <!-- 测试人员 -->
      <el-form-item class="search-wrap-item"  label="测试人员：">
        <el-select
          class="search-select"
          filterable
          v-model="searchForm.case_names"
          placeholder="全部"
          size="default"
          multiple
          clearable
          style="min-width: 200px; max-height: 50px; font-weight: normal;"
          @change="handleSearch"
          @clear="handleSearch"
          @remove-tag="handleSearch"
        >
          <el-option
            v-for="(item, index) in allCaseNameList"
            :key="item.uuid"
            :lable="item.nickName"
            :value="item.nickName"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 流转时间 -->
      <el-form-item class="search-wrap-item" label="流转时间：">
        <el-date-picker
          style="width: 240px"
          v-model="searchForm.timeFrame"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          @change="handleSearch"
        />
      </el-form-item>
      <!-- //! 由于给每个关键词都添加了change事件，所以这里的搜索按钮可有可无 -->
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 各需求BUG列表 -->
    <el-card class="card-wrap" v-loading="loading">
      <div class="card-wrap-table">
        <el-table
          :data="allRequirementBugs"
          style="width: 100%"
          :header-cell-style="tableHeaderStyle"
          :max-height="'660px'"
        >
          <el-table-column
            show-overflow-tooltip
            prop="requirementName"
            label="需求名称"
          />
          <el-table-column
            prop="trueTestName"
            label="测试姓名"
            width="100"
            align="center"
          />
          // ! 待完善: 路由跳转时面包屑和菜单栏有问题
          <el-table-column
            prop="address"
            label="BUG数量"
            width="160"
            align="center"
          >
            <template #="{ row }">
              <!-- 如果有bug，则给bug数量添加点击事件 -->
              <div
                class="bug-number"
                v-if="handleMathStatus(row).total > 0"
                @click="handleBugList(row.ID)"
              >
              {{ handleMathStatus(row).total }}
              </div>
              <!-- 否则没有点击事件 -->
               <div v-else>0</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="修复进度"
            width="280"
            align="center"
          >
            <template #="{ row }">
              <!-- 如果bugStatus数量全部为0，则进度为0，status='exception' -->
              <!-- <el-progress
                v-if="
                  row.bugStatus1 +
                  row.bugStatus2 +
                  row.bugStatus3 +
                  row.bugStatus4 +
                  row.bugStatus5 +
                  row.bugStatus6 +
                  row.bugStatus7 == 0 "
                :percentage="0"
                status="exception"
                :color="customColors"
                stroke-width="7"
              /> -->
              <!-- 如果进度为100,则进度条为success -->
              <!-- <el-progress
                v-else-if="
                  ((row.bugStatus6 + row.bugStatus7) /
                    ( row.bugStatus1 +
                      row.bugStatus2 +
                      row.bugStatus3 +
                      row.bugStatus4 +
                      row.bugStatus5 +
                      row.bugStatus6 +
                      row.bugStatus7
                    )) * 100 === 100 "
                status="success"
                :color="customColors"
                stroke-width="7"
              /> -->
              <!-- 如果0<percentage<100, 则进度条为动态色 -->
              <!-- <el-progress
                
                :percentage="
                  Math.round(
                    ((row.bugStatus6 + row.bugStatus7) /
                      ( row.bugStatus1 +
                        row.bugStatus2 +
                        row.bugStatus3 +
                        row.bugStatus4 +
                        row.bugStatus5 +
                        row.bugStatus6 +
                        row.bugStatus7
                      )) * 100)"
                :color="customColors"
                stroke-width="7"
              /> -->
              <el-progress
                v-if="handleMathStatus(row).percentage == 0"
                :percentage="handleMathStatus(row).percentage"
                status="exception"
                stroke-width="7"
              />
              <el-progress
                v-else-if="handleMathStatus(row).percentage == 100"
                :percentage="handleMathStatus(row).percentage"
                status="success"
                stroke-width="7"
              />
              <el-progress
                v-else
                :percentage="handleMathStatus(row).percentage"
                :color="customColors"
                stroke-width="7"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="160"
          >
            <template #="{ row }">
              <el-button
                class="add-bug-btn"
                type="primary"
                @click="handleAddBug(row.ID)"
                size="defalut"
              >
                添加bug
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 -->
      <div class="page-wrap">
        <Pagination
          v-model:currten-page="pageInfo.page"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </Pagination>
      </div>
    </el-card>

    <!-- 添加BUG弹窗 -->
    <el-dialog
      id="dialogAddBugForm"
      v-model="dialogAddBugVisible"
      title="添加Bug"
      width="1200px"
      style="width: 1200px; height: calc(100% - 100px); margin: 50px auto;"
      :show-close="true"
      :before-close="handleBeforeCancel"
    >
      <!-- 编辑bug区域 -->
      <el-form class="dialog-form-box" ref="addBugFormRef" :model="addBugData" :rules="addBugRules">
        <!-- 标题 -->
        <el-form-item class="dialog-form-item-box" prop="bug_title" style="width: 60%;">
          <!-- <div class="dialog-top-box"> -->
            <!-- <div class="dialog-top-left"> -->
              <div>
                <el-icon class="dialog-form-item-icon" :size="20">
                  <CollectionTag />
                </el-icon>
              </div>
              <div class="dialog-title"><span style="color: red;">&ast;&nbsp;</span>标题：</div>
              <el-input
                style="width: 400px;"
                size="defalut"
                placeholder="请输入发现的bug现象"
                v-model="addBugData.bug_title"
              ></el-input>
            <!-- </div> -->
            <!-- <div class="dialog-top-right">
              <div>
                <el-icon :size="20">
                  <User />
                </el-icon>
              </div>
              <div class="dialog-title"><span style="color: red;">&ast;&nbsp;</span>修复人:</div>
              <div>
                <el-select
                  v-model="checkRoleList"
                  filterable
                  multiple
                  placeholder=""
                  style="width: 240px">
                  <el-option
                    v-for="(item, index) in allRoleUserList"
                    :key="index"
                    :label="item.nickName"
                    :value="item.nickName"
                  />
                </el-select>
              </div> -->
              <!-- <div v-for="(item, index) in checkRoleList" :key="index">
                <el-avatar :size="32" :src="item.headerImg" />
              </div>
              <div>
                <div>
                  <el-icon
                    class="dialog-active"
                    :size="32"
                    @mouseenter="handleShowBugCases"
                    @mouseleave="handleHideBugCases"
                  >
                    <CirclePlus />
                  </el-icon>
                  <div v-if="isSelect">
                    <ul
                      class="dialog-select-cases"
                      @mouseenter="handleShowBugCases"
                      @mouseleave="handleHideBugCases"
                    >
                      <li
                        class="dialog-select-item"
                        v-for="(item, index) in allCaseAvater"
                        :key="index"
                        @click="toggleRoleName(item)"
                        :class="{ checkedRole: isCheckedRole(item) }"
                      >
                        <el-avatar :size="20" :src="item.headerImg" />
                        <p class="dialog-select-item-name">
                          {{ item.nickName }}
                        </p>
                      </li>
                    </ul>
                  </div>
                </div>
              </div> -->
            <!-- </div> -->
          <!-- </div> -->
        </el-form-item>

        <!-- 修复人 -->
        <el-form-item class="dialog-form-item-box" prop="edit_user_ids" style="width: 40%">
          <div>
            <el-icon class="dialog-form-item-icon" :size="20">
              <User />
            </el-icon>
          </div>
          <div class="dialog-title"><span style="color: red;">&ast;&nbsp;</span>修复人：</div>
          <div>
              <el-select
                v-model="addBugData.edit_user_ids"
                filterable
                multiple
                clearable
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="2"
                placeholder="请选择修复人员"
                style="width: 260px">
                <el-option
                  v-for="(item, index) in allRoleUserList"
                  :key="index"
                  :label="item.nickName"
                  :value="item.uuid"
                />
              </el-select>
            </div>
        </el-form-item>

        <!-- bug等级 -->
        <el-form-item class="dialog-form-item-box" prop="bug_level" style="width: 100%;">
          <!-- <div class="dialog-top-box" style="margin-top: 0; height: 40px;"> -->
            <div>
              <el-icon class="dialog-form-item-icon" :size="20">
                <EditPen />
              </el-icon>
            </div>
            <div class="dialog-title">&nbsp;&nbsp;BUG等级：</div>
            <el-radio-group v-model="addBugData.bug_level" size="large">
              <el-radio-button label="致命" :value="0" class="bug-level-0" />
              <el-radio-button label="严重" :value="1" class="bug-level-1" />
              <el-radio-button label="一般" :value="2" class="bug-level-2" />
              <el-radio-button label="建议" :value="3" class="bug-level-3" />
            </el-radio-group>
          <!-- </div> -->
        </el-form-item>

        <!-- 编辑bug -->
        <el-form-item prop="bug_msgs" style="width: 100%;">
          <div class="bug-edit-box">
            <EditorVue
              v-model="addBugData.bug_msgs[0].bug_msg"
              @update:modelValue="updateModelValue"
            />
          </div>
        </el-form-item>

        <!-- 底部添加/取消按钮 -->
        <el-form-item style="width: 100%;">
          <div class="bug-edit-btn">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleAddBugData(addBugFormRef)">
              提交
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// import BugListVue from "./bugList/index.vue";
import EditorVue from "./editor.vue";
import { onMounted, reactive, ref } from "vue";
import Pagination from "@/components/Pagenation/index.vue";
import { postRequirementsBugs, addRequirementBug } from "@/api/bug/index"; // 引入接口函数
import { ElMessage, FormInstance } from "element-plus";
import { getShortCuts, isValidateEditor } from "@/utils/utils"; //引入公共函数
import type { BugList } from "@/api/bug/type";
import useCommonDataStore from "@/store/common/common"; //获取所有的修复人
import { useRouter } from "vue-router";


const router = useRouter();
const useCommonStore = useCommonDataStore();
const loading = ref(false);

// 自定义进度条的颜色
const customColors = [
  { color: "#F56C6C", percentage: 40 },
  { color: "#409EFF", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#67C23A", percentage: 100 },
];
// 自定义table样式
const tableHeaderStyle = {
  backgroundColor: "#F2F6FC",
  color: "#909399",
  textAlign: "center",
};
// 初始分页
const pageInfo = reactive({
  total: 0, //总条目
  page: 1, //当前页码
  pageSize: 20, //当前每页条数
});

// 定义所有的bug数据
const allRequirementBugs = ref([] as BugList[]);
// 定义检索区域下拉列表数据
const allCaseNameList = ref<any>([]);
const allRequirementList = ref<any>([]);
// 定义添加bug弹窗控件
const dialogAddBugVisible = ref(false);
// 定义所有的修复人员列表
const allRoleUserList = ref<any>([]);
// 用于临时存储选中修复人员
const checkRoleList = ref([] as any);

//// 定义修复人下拉列表控件
//// const isSelect = ref(false);
//// 定义所有修复人员姓名和头像
//// const allCaseAvater = ref<any>([]);
//// let allRoleUsersStore = useCommonDataStore();


// 初始化查询参数的方法
const initSearchFrom = () => ({
  title_name: "",
  case_names: [],
  timeFrame: null,
  page: 1,
  page_size: 20,
});

// 定义查询参数初始值
const searchForm = reactive(initSearchFrom());

// 获取公共数据
const getCommon = async (index: any) => {
  // if(index == '') {
  //   console.log(index)
  //   await useCommonStore.getAllRoleUsersList(index);
  //   allRoleUserList.value = useCommonStore.$state.allRoleUserList;
  //   console.log("修复人员名单：", allRoleUserList.value)
  // };
  // if(index == 666) {
  //   await useCommonStore.getAllRoleUsersList(index);
  //   allCaseNameList.value = useCommonStore.$state.allRoleUserList;
  //   console.log("测试人员名单：", allCaseNameList.value)
  // }

  await useCommonStore.getAllRoleUsersList(index);
  allRoleUserList.value = useCommonStore.$state.allRoleUserList;

  allCaseNameList.value = allRoleUserList.value.filter((item: any) => item.authorityId == 666 );
    
}

// 定义添加bug表单实例
const addBugFormRef = ref<FormInstance>();

// 定义添加bug表单验证规则
const addBugRules = reactive({
  bug_title: [
    {
      required: true,
      message: "请输入bug名称",
      trigger: "blur",
      // validator: (rule: any, value: any, callBack: any) => {
      //   if (value.trim() === "") {
      //     callBack(new Error("bug名称不能为空"));
      //   } else {
      //     callBack();
      //   }
      // }
    },
  ],
  edit_user_ids: [{
      required: true,
      message: "请选择修复人员",
      trigger: "blur",
  }],
  bug_msgs: [
    {
      validator: (rule: any, value: any, callBack: any) => {
        if ((isValidateEditor(value[0].bug_msg))) {
          // alert(`"富文本校验结果：",${isValidateEditor(value[0].bug_msg)}`);
          callBack(new Error('BUG详情不能为空'));
        } else {
          callBack();
        }
      },
      required: true,
      trigger: "blur",
    }
   /*  {
      required: true,
      messgae: "请记录BUG",
      trigger: "blur",
    },
    {
      validator: (rule: any, value: any, callBack: any) => {
        if (!(isValidateEditor(value[0].bug_msg))) {
          alert(isValidateEditor(value[0].bug_msg));
          callBack(new Error("bug详情不能为空格或空行！"));
        } else {
          callBack();
        }
      },
      trigger: "blur"
    }, */
  ],
});

// 初始化-添加bug弹窗
const initAddBug = () => ({
  item_requirement_id: 0,
  bug_title: "",
  bug_level: 0,
  edit_user_ids: [] as Array<any>,
  bug_status: 0,
  bug_msgs: [{ bug_msg: "" }] as {bug_msg: string}[],
});
// 定义添加bug请求参数初始值
const addBugData = reactive(initAddBug());

// TODO 获取检索区域下拉列表数据：allRequirementList
const getAllCaseNameList = async () => {
  loading.value = true;
  const { data } = await postRequirementsBugs({
    title_name: "",
    case_names: [],
    begin_time: null,
    end_time: null,
    page: 1,
    page_size: 10000,
  });

  if (data.code === 200) {
    /* allCaseNameList.value = [
      ...new Set(data.data.list.map((item) => item.trueTestName)),
    ]; */
    // 用于模糊查找数据
    allRequirementList.value = data.data.list.map(
      (item) => item.requirementName
    );
  } else {
    ElMessage.error(data.msg);
    throw console.log(data.msg);
  }
  loading.value = false;
};

// TODO 模糊查询的方法
const querySearch = (queryString: string, cb: any) => {
  const results = allRequirementList.value
    .filter((item: any) => item.includes(queryString))
    .map((item: any) => ({ value: item }));
  console.log(results);
  cb(results);
};

// TODO 获取所有需求下的所有BUG
const getAllBugs = async () => {
  loading.value = true;

  const { data } = await postRequirementsBugs({
    title_name: searchForm.title_name,
    case_names: searchForm.case_names,
    begin_time: searchForm.timeFrame !== null ? searchForm.timeFrame[0] : null,
    end_time: searchForm.timeFrame !== null ? searchForm.timeFrame[1] : null,
    page: pageInfo.page,
    page_size: pageInfo.pageSize,
  });

  if (data.code === 200) {
    // 存储响应数据
    allRequirementBugs.value = data.data.list;
    console.log(allRequirementBugs.value);

    pageInfo.page = data.data.page;
    pageInfo.pageSize = data.data.pageSize;
    pageInfo.total = data.data.total;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
  loading.value = false;
};

// TODO 计算进度条及bug数量
const handleMathStatus = (item: any) => {
  const total = item.bugStatus1 + item.bugStatus2 + item.bugStatus3 + item.bugStatus4 + item.bugStatus5 + item.bugStatus6 + item.bugStatus7;
  if(total !== 0) {
    const percentage = (((item.bugStatus6 + item.bugStatus7)/total)*100).toFixed(0);
    return {
      total,
      percentage
    }
  } else {
    const percentage = 0;
    return {
      total,
      percentage
    }
  }
}

// TODO 查询事件
// 时间快捷选择器
const shortcuts = getShortCuts();

// 搜索功能
const handleSearch = async () => {
  loading.value = true;
  await getAllBugs();
  loading.value = false;
};

// TODO 点击【BUG数量】跳转到对应的BUG列表页
const handleBugList = (id: number) => {
  router.push({
    name: "BugsList",
    params: { id },
  });
};

// 更改每页条目数
const handleSizeChange = async (val: number) => {
  pageInfo.pageSize = val;
  pageInfo.page = 1;
  await getAllBugs();
};
// 更改当前页码
const handleCurrentChange = async (val: number) => {
  pageInfo.page = val;
  await getAllBugs();
};

//TODO 添加BUG
// 点击【添加BUG】，开启弹窗
const handleAddBug = async (id: number) => {
  dialogAddBugVisible.value = true;

  addBugData.bug_level = 0;
  addBugData.item_requirement_id = 0;
  addBugData.bug_title = "";
  addBugData.bug_msgs[0].bug_msg = "";
  addBugData.bug_status = 1;
  addBugData.edit_user_ids = [];
  checkRoleList.value = [];

  addBugData.item_requirement_id = id;
  // allCaseAvater.value = await allRoleUsersStore.getAllRoleUsers();
  allRoleUserList.value = useCommonStore.$state.allRoleUserList;
};

// 鼠标移入添加修复人事件
// const handleShowBugCases = () => {
//   isSelect.value = true;
// };

// 鼠标移出添加修复人事件
// const handleHideBugCases = () => {
//   isSelect.value = false;
// };

// 选择修复人
// const isCheckedRole = (item: any) => {
//   return checkRoleList.value.some(
//     (checkItem: any) => checkItem.uuid === item.uuid
//   );
// };
// const toggleRoleName = (item: any) => {
//   const selectIndex = checkRoleList.value.findIndex(
//     (checkItem: any) => checkItem.uuid === item.uuid
//   );
//   if (selectIndex > -1) {
//     checkRoleList.value.splice(selectIndex, 1);
//     addBugData.edit_user_ids = checkRoleList.value;
//   } else {
//     checkRoleList.value.push({ uuid: item.uuid, headerImg: item.headerImg });
//     addBugData.edit_user_ids = checkRoleList.value;
//   }
// };

// 富文本数据更新
const updateModelValue = (newValue: any) => {
  addBugData.bug_msgs[0].bug_msg = newValue;
  return addBugData.bug_msgs;
};

// 提交添加bug事件
const handleAddBugData = async (formEl: FormInstance | undefined) => {
  loading.value = true;
  console.log("表单提交数据：", addBugData);
  // 监听富文本内容
  window.addEventListener("update:modelValue", updateModelValue);

  if (!formEl) {
    console.error("表单验证失败，请将内容填写完整");
    return;
  };

  // 表单验证
  const validatePromise = formEl.validate();
  try {
    await validatePromise;
    // 表单验证成功
    // 发起请求
    const { data } = await addRequirementBug(addBugData);
    console.log("响应结果", data);
    if(data.code === 200) {
        ElMessage.success(data.msg);
        initAddBug();
        getAllBugs();
        dialogAddBugVisible.value = false;
        loading.value = false;
      } else {
        ElMessage.error(data.msg);
        initAddBug();
        getAllBugs();
        dialogAddBugVisible.value = false;
        loading.value = false;
        throw console.error(data.msg);
      }
  } catch (error) {
    // 表单验证失败
    loading.value = false;
      console.error("表单验证失败，请将内容填写完整");
      return;
  }


  // if (addBugData.bug_title.trim() !== "") {
  //   if (addBugData.edit_user_ids.length !== 0 && addBugData.edit_user_ids !== null ) {
  //     // 点击提交按钮
  //     const { data} = await addRequirementBug({
  //       item_requirement_id: addBugData.item_requirement_id,
  //       bug_title: addBugData.bug_title,
  //       bug_level: addBugData.bug_level,
  //       edit_user_ids: (addBugData.edit_user_ids = checkRoleList.value.map(
  //         (item: any) => item.uuid
  //       )),
  //       bug_status: addBugData.bug_status,
  //       bug_msgs: addBugData.bug_msgs,
  //     });

  //     if(data.code === 200) {
  //       ElMessage.success(data.msg);
  //       initAddBug();
  //       getAllBugs();
  //       dialogAddBugVisible.value = false;
  //       loading.value = false;
  //     } else {
  //       ElMessage.error(data.msg);
  //       initAddBug();
  //       getAllBugs();
  //       dialogAddBugVisible.value = false;
  //       loading.value = false;
  //       throw console.error(data.msg);
  //     }
  //   } else {
  //         alert("请选择修复人！");
  //     }
  // } else {
  //   alert("请输入bug名称！");
  // }
};

// 取消添加bug
const handleCancel = () => {
  addBugData.bug_level = 0;
  addBugData.item_requirement_id = 0;
  addBugData.bug_title = "";
  addBugData.bug_msgs[0].bug_msg = "";
  addBugData.bug_status = 0;
  addBugData.edit_user_ids = [];
  checkRoleList.value = [];

  dialogAddBugVisible.value = false;
  Object.assign(dialogAddBugVisible, initAddBug());
};
const handleBeforeCancel = (done: any) => {
  addBugData.bug_level = 0;
  addBugData.item_requirement_id = 0;
  addBugData.bug_title = "";
  addBugData.bug_msgs[0].bug_msg = "";
  addBugData.bug_status = 0;
  addBugData.edit_user_ids = [];
  checkRoleList.value = [];

  dialogAddBugVisible.value = false;
  Object.assign(dialogAddBugVisible, initAddBug());
  done();
};

onMounted(async () => {
  getAllCaseNameList();
  getAllBugs();
  getCommon("");
  // getCommon(666);
});
</script>

<style lang="scss" scoped>
.el-select__selection {
  flex-wrap: nowrap;
  overflow-y: scroll;
}

/* 需求名称溢出 */
.requirement-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* bug数量 */
.bug-number {
  cursor: pointer;
  color: #409eff;
}

// 添加bug弹窗
.dialog-form-box {
  width: 100%;
  height: 720px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .dialog-form-item-icon svg {
    margin-top: 15px;
  }

  .dialog-form-item-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;


     // bug等级按钮
     .bug-level-0 {
      --el-radio-button-checked-bg-color: #B40404;
      --el-radio-button-checked-border-color: #B40404;
      list-style: none;
      border: 1px solid #dcdcdc;
      border-radius: 5px 0 0 5px;
    }
    
    .bug-level-1 {
      list-style: none;
      border: 1px solid #dcdcdc;
      --el-radio-button-checked-bg-color: #ff0000;
      --el-radio-button-checked-border-color: #ff0000;
    }
    
    .bug-level-2 {
      list-style: none;
      border: 1px solid #dcdcdc;
      --el-radio-button-checked-bg-color: #67c23a;
      --el-radio-button-checked-border-color: #67c23a;
    }
    .bug-level-3 {
      list-style: none;
      border: 1px solid #dcdcdc;
      border-radius: 0 5px 5px 0;
    }

    // bug编辑区域
    .bug-edit-box {
      width: 100%;
      height: 510px;
      border-top: 1px solid #ddd;
      box-shadow: none;
      border-radius: 0;
      padding: 10px 20px;
    }
  }
  // 添加bug操作区域
  .bug-edit-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
  }


  // 原样式：添加bug弹窗
  /* .dialog-top-box {
    width: 100%;
    height: 40px;
    margin: 10px 20px;
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;

    .dialog-top-left {
      width: 50%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-right: 50px;

      .dialog-ipt {
        height: 32px;
        min-width: 200px;
        max-width: 300px;
      }
    }

    .dialog-top-right {
      width: 50%;
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-left: 50px;

      .dialog-active svg {
        margin-left: 10px;
        color: #409eff;
        position: relative;
      }

      .dialog-active svg:hover {
        color: #79bbff;
        cursor: pointer;
      }

      .dialog-select-cases {
        width: 120px;
        height: 96px;
        position: absolute;
        border: 1px solid #eee;
        border-radius: 5px;
        margin-top: -15px;
        z-index: 999;
        overflow-y: auto;

        .dialog-select-item {
          height: 32px;
          line-height: 32px;
          padding: 5px;
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: flex-start;

          .dialog-select-item-name {
            display: inline-block;
            font-size: 14px;
            margin-left: 5px;
            line-height: 22px;
          }
        }

        .dialog-select-item:hover {
          cursor: pointer;
        }
      }

      .dialog-select-cases::-webkit-scrollbar {
        width: 8px;
      }

      .dialog-select-cases::-webkit-scrollbar-track {
        background: #f1f1f1;
        margin-left: 5px;
      }

      .dialog-select-cases::-webkit-scrollbar-thumb {
        background: #409eff;
        border-radius: 4px;
      }

      .dialog-select-cases::-webkit-scrollbar-thumb:hover {
        background: #409eff;
      }

      .checkedRole {
        background-color: rgb(121.3, 187.1, 255);
        color: white;
      }
    }

    .dialog-title {
      height: 60px;
      flex-wrap: nowrap;
      font: $font-titile;
      line-height: 32px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .el-icon svg {
      width: 32px;
      height: 32px;
      margin: auto;
      text-align: center;
      color: black;
    }

    .bug-level-1 {
      --el-radio-button-checked-bg-color: #ff0000;
      --el-radio-button-checked-border-color: #ff0000;
    }

    .bug-level-2 {
      --el-radio-button-checked-bg-color: #67c23a;
      --el-radio-button-checked-border-color: #67c23a;
    }
  } */

}
</style>
